<template>
  <div>
    <canvas ref="canvas" width="450" height="450"></canvas>
  </div>
</template>

<script>
export default {
  data() {
    return {
      theta: 0, // 初始目标方向角（度）
      intervalId: null, // 定时器 ID
    };
  },
  mounted() {
    this.drawBeamPattern();
    this.startAngleUpdate();
  },
  beforeUnmount() {
    this.stopAngleUpdate(); // 组件销毁时清除定时器
  },
  methods: {
    drawBeamPattern() {
      const canvas = this.$refs.canvas;
      const ctx = canvas.getContext('2d');
      const centerX = canvas.width / 2;
      const centerY = canvas.height / 2;
      const radius = Math.min(centerX, centerY) - 40; // 圆形画布半径
      const N = 10; // 天线数量
      const d = 0.2; // 天线间距（波长）
      const lambda = 1; // 波长（归一化）

      // 清空画布
      ctx.clearRect(0, 0, canvas.width, canvas.height);

      // 绘制 12 个坐标刻度和角度标注
      ctx.strokeStyle = '#ccc'; // 坐标线颜色
      ctx.fillStyle = '#000'; // 角度标注颜色
      ctx.font = '12px Arial';
      ctx.textAlign = 'center';
      ctx.textBaseline = 'middle';

      const labelRadius = radius + 20; // 调整角度标注的半径，防止被遮挡

      for (let i = 0; i < 12; i++) {
        const angle = (i * 30 * Math.PI) / 180; // 每 30° 一个刻度
        const x1 = centerX + radius * Math.cos(angle);
        const y1 = centerY - radius * Math.sin(angle);
        const x2 = centerX + (radius + 5) * Math.cos(angle);
        const y2 = centerY - (radius + 5) * Math.sin(angle);

        // 绘制坐标线
        ctx.beginPath();
        ctx.moveTo(centerX, centerY);
        ctx.lineTo(x1, y1);
        ctx.stroke();

        // 绘制刻度
        ctx.beginPath();
        ctx.moveTo(x1, y1);
        ctx.lineTo(x2, y2);
        ctx.stroke();

        // 标注角度
        const labelX = centerX + labelRadius * Math.cos(angle);
        const labelY = centerY - labelRadius * Math.sin(angle);
        const labelText = `${i * 30}°`;

        // 绘制角度标注
        ctx.fillText(labelText, labelX, labelY);
      }

      // 绘制天线位置（沿 x 轴正方向排布）
      // ctx.fillStyle = '#00f'; // 天线颜色
      // for (let n = 0; n < N; n++) {
      //   const antennaX = centerX + n * d * 50; // 沿 x 轴正方向排布，间距为 d * 50（缩放比例）
      //   const antennaY = centerY;
      //   ctx.beginPath();
      //   ctx.arc(antennaX, antennaY, 3, 0, 2 * Math.PI); // 绘制天线点
      //   ctx.fill();
      // }

      // 计算并绘制瓣状图形
      ctx.beginPath();
      for (let phi = -90; phi <= 90; phi += 1) {
        const phiRad = (phi * Math.PI) / 180; // 转换为弧度
        let sum = 0;
        for (let n = 0; n < N; n++) {
          const phase = ((2 * Math.PI * d * n) / lambda) * Math.sin(phiRad - (this.theta * Math.PI / 180)); // 应用 theta
          sum += Math.cos(phase); // 假设权重为 1
        }
        const magnitude = Math.abs(sum); // 辐射强度
        const scale = radius / Math.max(...Array.from({ length: 181 }, (_, i) => {
          const angle = (-90 + i) * Math.PI / 180;
          let s = 0;
          for (let n = 0; n < N; n++) {
            s += Math.cos(((2 * Math.PI * d * n) / lambda) * Math.sin(angle - (this.theta * Math.PI / 180))); // 应用 theta
          }
          return Math.abs(s);
        })); // 动态缩放比例
        const x = centerX + scale * magnitude * Math.cos(phiRad);
        const y = centerY - scale * magnitude * Math.sin(phiRad);
        if (phi === 0) {
          ctx.moveTo(x, y);
        } else {
          ctx.lineTo(x, y);
        }
      }
      ctx.strokeStyle = '#f00';
      ctx.stroke();
    },

    startAngleUpdate() {
      this.intervalId = setInterval(() => {
        this.theta += 1; // 每秒角度加一度
        if (this.theta >= 360) {
          this.theta -= 360; // 角度超过 360° 时重置
        }
        this.drawBeamPattern(); // 重新绘制波束图
      }, 100); // 每秒更新一次
    },

    stopAngleUpdate() {
      if (this.intervalId) {
        clearInterval(this.intervalId); // 清除定时器
        this.intervalId = null;
      }
    },
  },
};
</script>

<style scoped>
canvas {
  border: 1px solid #000;
  border-radius: 50%; /* 将画布显示为圆形 */
  margin: 10px;
}
</style>